<template>
  <view>
    <button type="primary" @click="setStorage">存储数据</button>
    <button type="primary" @click="getStorage">获取数据</button>
    <button type="primary" @click="removeId">移除id</button>

    <!-- #ifdef H5 -->
    <view>我希望只在h5页面中看见</view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>我希望只在微信小程序页面中看见</view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view>我希望只在APP页面中看见</view>
    <!-- #endif -->

    <button @click="pullDown">下拉刷新</button>
    <view>这是列表页</view>
    <view class="box-item" v-for="(item, index) in list" :key="index">
      {{ item }}
	  <button type="primary" @click="chooseImg">上传图片</button>
	  <image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['前端','JAVA','UI','测试','大数据'], // 保留了第二个data中的列表数据
      imgArr: [] // 保留了第一个data中的图片数组
    }
  },
  onLoad(options) {
    console.log('页面加载了', options)
    // #ifdef H5
    console.log('我希望h5中打印')
    // #endif
    // #ifdef MP-WEIXIN
    console.log('我希望微信小程序中打印')
    // #endif
  },
  onShow() {
    console.log('页面显示了')
  },
  onReady() {
    console.log('页面初次渲染完成了')
  },
  onHide() {
    console.log('页面隐藏了')
  },
  // 下拉刷新回调
  onPullDownRefresh() {
    console.log('触发了下拉刷新')
    // 模拟数据加载
    setTimeout(() => {
      this.list = ['前端','JAVA','UI','测试','大数据']
      uni.stopPullDownRefresh() // 停止下拉刷新
    }, 2000)
  },
  onReachBottom(){
	  console.log('页面触底了')
	this.list = [...this.list,...['JAVA','UI','前端','测试','大数据']]
  },
  methods: {
    setStorage() {
      uni.setStorageSync('id', 100)
      uni.showToast({
        title: '存储成功',
        icon: 'success'
      })
    },

    getStorage() {
      const res = uni.getStorageSync('id')
      console.log(res)
      if (res) {
        uni.showToast({
          title: `获取到id: ${res}`,
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '未找到数据',
          icon: 'none'
        })
      }
    },
    
    removeId() {
      uni.removeStorageSync('id')
      uni.showToast({
        title: '删除成功',
        icon: 'success'
      })
    },
    
    pullDown() {
      console.log('开启下拉刷新')
      uni.startPullDownRefresh()
    },
	previewImg(current) {
	  uni.previewImage({
	    current,
	    urls: this.imgArr,
	    loop: true,
	    indicator: 'default'
	  })
	},
	chooseImg() {
	  uni.chooseImage({
	    count: 5,
	    success: res => {
	      this.imgArr = res.tempFilePaths
	    }
	  })
	}
  }
}
</script>

<style>
.box-item {
  height: 100px;
  line-height: 100px;
}

/* h5中的样式 */
/* #ifdef H5 */
view {
  color: hotpink;
}
/* #endif */

/* 微信小程序中的样式 */
/* #ifdef MP-WEIXIN */
view {
  color: #0000FF;
}
/* #endif */

button {
  margin: 10rpx 0;
}
</style>